<template>
  <div class="body-content">
    <ul class="item">
      <li
          v-for="item of list"
          v-bind:key="item.id">
          <img class="item-img" src="https://sfault-avatar.b0.upaiyun.com/323/244/3232443428-5b16b2ae19934_big64">
          <div class="item-content">
              <div class="content-top"><router-link to="/news/detail"> 这是一个标题{{item.name}}</router-link></div>
              <div class="content-next"><a> {{item.name}}</a> 2天以前 <a>ddddd</a></div>
          </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'PublicContent',
  data: function () {
    return {
      list: []
    }
  },
  methods: {
    listhandle: function () {
      axios.get('./static/demo/list.json', {
        params: {
          id: 1
        }
      }).then(this.succHandle)
    },
    succHandle (res) {
      console.log(res)
      if (res.data.code && res.data.data.length > 0) {
        const result = res.data.data
        console.log(result)
        this.list = result
      }
    }
  },
  mounted () {
    this.listhandle()
  }
}
</script>

<style scoped>
.body-content {
   margin-top: 0px;
   width: auto;
   height: auto;
  }
.item {
  height: auto;
}
.item >li {
  list-style: none;
  border-bottom: 1px solid #eee;
  height: 80px;
  margin: 10px;
  padding: 15px;
  /*background-color: #7d7d7d;*/
  /*border: 2px solid red;*/
}
.item-img {
  /*display: inline-block;*/
  float: left;
  height: 64px;
  width: 64px;
  line-height: 80px;
}
.item-content{
  /*display: inline-block;*/
  float: left;
  padding-left: 20px;
}
.content-top{
  /*display: block;*/
  /*float: left;*/
    line-height: 32px;
}
.content-next{
    line-height: 22px;
}
.content-top a{
  color:#009a61;
  cursor: pointer;
}
.content-top a:hover {
  text-decoration:underline;
}
</style>
